<template>
  <div class="user">
    <!-- 内容区域 start-->
    <el-card class="box-card">
      <el-button type="primary" size="mini" @click="dialog = true">新增菜单</el-button>
      <!-- 菜单列表区域 start-->
      <el-table
        :data="menuList"
        row-key="_id"
        border
        size="small"
        :default-expand-all="expandAll"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column align="center" label="菜单姓名" prop="menu_name"></el-table-column>
        <el-table-column align="center" label="菜单ID" prop="menu_id"></el-table-column>
        <el-table-column align="center" label="菜单路径" prop="menu_path"></el-table-column>
        <el-table-column align="center" label="菜单层级" prop="menu_level">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.menu_level===1">一级菜单</el-tag>
            <el-tag type="danger" v-else>二级菜单</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="菜单图标" prop="menu_icon"></el-table-column>
        <el-table-column align="center" label="菜单状态" prop="menu_status">
          <template slot-scope="scope">
            <el-tag type="success">{{scope.row.menu_status===1? "启用":"停用"}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditMenuDialog(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteMenu(scope.row._id,scope.row.menu_level)"
            ></el-button>
            <!-- <el-tooltip
              class="item"
              effect="dark"
              content="分配权限"
              placement="top-start"
              :enterable="false"
            >
              <el-button type="warning" icon="el-icon-s-tools" size="mini"></el-button>
            </el-tooltip>-->
          </template>
        </el-table-column>
      </el-table>
      <!-- 菜单列表区域 end-->

      <!-- 抽屉功能 start-->
      <el-drawer
        title="新增菜单"
        :before-close="handleClose"
        :visible.sync="dialog"
        :with-header="false"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <div class="drawer_content">
          <h3>新增一级菜单</h3>
          <el-form
            :inline="true"
            label-width="auto"
            :model="setMenuform"
            ref="setMenuform"
            :rules="setMenuRules"
            size="mini"
          >
            <el-form-item label="Ⅰ级菜单名称" prop="menu_name">
              <el-input v-model="setMenuform.menu_name"></el-input>
            </el-form-item>
            <el-form-item label="Ⅰ级菜单图标" prop="menu_icon">
              <el-input v-model="setMenuform.menu_icon" placeholder="请选择下面图标"></el-input>
            </el-form-item>
            <el-form-item label="Ⅰ级菜单路径" prop="menu_path">
              <el-input v-model="setMenuform.menu_path"></el-input>
            </el-form-item>
            <el-form-item label="Ⅰ级菜单ID" prop="menu_id">
              <el-input v-model="setMenuform.menu_id"></el-input>
            </el-form-item>
            <el-form-item label="Ⅰ级权限层级">
              <el-input :disabled="true" v-model="setMenuform.menu_level"></el-input>
            </el-form-item>
          </el-form>
          <div class="drawer_footer">
            <el-button @click="cancelForm" size="mini">取 消</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="setMenu"
              :loading="loading"
            >{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </div>

          <h3>新增二级菜单</h3>
          <el-form
            :inline="true"
            label-width="auto"
            :model="setSubmenuform"
            ref="setSubmenuform"
            :rules="setSubmenuRules"
            size="mini"
          >
            <el-form-item label="Ⅱ级菜单名称" prop="menu_name">
              <el-input v-model="setSubmenuform.menu_name"></el-input>
            </el-form-item>
            <el-form-item label="Ⅱ级菜单分组" prop="subMenuIdvalue">
              <el-select
                size="mini"
                v-model="setSubmenuform.subMenuIdvalue"
                @change="selectMenu"
                placeholder="选择分类"
              >
                <el-option
                  v-for="item in menuList"
                  :key="item._id"
                  :label="item.menu_name"
                  :value="`${item._id}+${item.menu_path}`"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Ⅱ级菜单路径" prop="menu_path">
              <el-input v-model="setSubmenuform.menu_path"></el-input>
            </el-form-item>
            <el-form-item label="Ⅱ级权限层级" prop="menu_level">
              <el-input :disabled="true" v-model="setSubmenuform.menu_level"></el-input>
            </el-form-item>
          </el-form>
          <div class="drawer_footer">
            <el-button @click="cancelForm" size="mini">取 消</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="setSubMenu"
              :loading="loading"
            >{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </div>
          <!-- 图标组件-->
          <Icons v-on:getIcon="getIconValue" />
        </div>
      </el-drawer>
      <!-- 抽屉功能 end-->
    </el-card>

    <!-- 编辑菜单 start-->
    <EtidMenuDialog
      :editMenuFormCom="editMenuFormCom"
      :menuList="menuList"
      @confirmEditMenu="confirmEditMenu"
    ></EtidMenuDialog>
    <!-- 编辑菜单 end-->
  </div>
</template>

<script>
import Validate from '@/plugins/validate'
import { mapGetters } from 'vuex'

export default {
  components: {
    EtidMenuDialog: () => import('@/components/Dialogs/EditMenu.vue'),
    Icons: () => import('@/components/Icon/Icons.vue'),
  },
  data() {
    return {
      expandAll: false, //展开表格子项
      activeColor: '#13ce66', //状态开关颜色
      dialog: false, //控制抽屉的隐藏和显示
      loading: false, //加载中
      setMenuRules: Validate.setMenuRules, //Ⅰ级菜单验证
      setMenuform: {
        menu_name: '', //Ⅰ级菜单名称
        menu_id: '', //Ⅰ级菜单ID
        menu_path: '', //Ⅰ级菜单路径
        menu_icon: '', //Ⅰ级菜单图标
        menu_level: 1, //Ⅰ级菜单权限层级
      },
      setSubmenuRules: Validate.setSubmenuRules, //Ⅱ级菜单验证
      setSubmenuform: {
        menu_id: '', //Ⅰ级菜单ID
        menu_name: '', //Ⅱ级菜单名称
        menu_path: '', //Ⅱ级菜单路径
        menu_level: 2, //Ⅱ级菜单权限层级
      },
      subMenuIdvalue: '', //选中Ⅱ级菜单分组值
      subMenuPathvalue: '', //选中Ⅰ级菜单路劲
      //编辑菜单
      select_id: '', //当前选中编辑菜单ID
      select_menuLevel: '', //当前选中编辑菜单权限层级
      editMenuFormCom: {
        editMenuForm: {}, //编辑菜单表单
        editMenuDialogVisible: false, //编辑菜单弹框默认状态
      },
    }
  },
  computed: {
    ...mapGetters(['menuList']),
  },
  methods: {
    //新增Ⅰ级菜单选项
    setMenu() {
      this.$refs.setMenuform.validate(async (valid) => {
        if (valid) {
          const {
            menu_id,
            menu_name,
            menu_level,
            menu_path,
            menu_icon,
          } = this.setMenuform
          const { data: res } = await this.$api.author.setMenu(this.setMenuform)
          if (res.meta.status !== 200) {
            this.$message.error({ message: res.meta.message }) //当前菜单设置保存失败
          } else {
            this.$refs.setMenuform.resetFields() //重置表单内容
            this.$message.success({ message: res.meta.message }) //当前菜单设置保存成功
            this.$store.dispatch('getmenuList')
          }
        } else {
          return false
        }
      })
    },

    //选中以及菜单值
    selectMenu(value) {
      const selectMenuValue = value.split('+')
      this.subMenuIdvalue = selectMenuValue[0]
      this.subMenuPathvalue = `${selectMenuValue[1]}`
    },

    //新增二菜单选项
    setSubMenu() {
      this.$refs.setSubmenuform.validate(async (valid) => {
        if (valid) {
          const {
            subMenuIdvalue,
            menu_name,
            menu_level,
            menu_path,
          } = this.setSubmenuform
          const data = {
            subMenuIdvalue: this.subMenuIdvalue,
            menu_name,
            menu_level,
            menu_path: `${this.subMenuPathvalue}/${menu_path}`,
          }
          const { data: res } = await this.$api.author.setSubMenu(data)
          if (res.meta.status !== 200) {
            this.$message.error({ message: res.meta.message }) //当前菜单设置保存失败
          } else {
            this.$refs.setSubmenuform.resetFields() //重置表单内容
            this.$message.success({ message: res.meta.message }) //当前菜单设置保存成功
            this.$store.dispatch('getmenuList')
          }
        } else {
          return false
        }
      })
    },

    //编辑菜单对话框点击显示事件
    async showEditMenuDialog(menu) {
      this.select_id = menu._id
      const data = { _id: menu._id, menu_level: menu.menu_level }
      const { data: res } = await this.$api.author.showEditMenu(data)
      if (res.meta.status !== 200) {
        return this.$message.error({ message: res.meta.message })
      }
      this.editMenuFormCom.editMenuForm = res.data
      this.editMenuFormCom.editMenuDialogVisible = true
    },

    //编辑菜单对话框的提交事件
    async confirmEditMenu(data) {
      const { data: res } = await this.$api.author.putEditMenu(data)
      if (res.meta.status !== 200) {
        return this.$message.error({ message: res.meta.message })
      } else {
        this.$message.success({ message: res.meta.message })
        this.$store.dispatch('getmenuList')
      }
    },

    //删除选中菜单
    async deleteMenu(id, menu_level) {
      await this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const { data: res } = await this.$api.author.deleteMenu(
            menu_level,
            id
          )
          if (res.meta.status !== 200) {
            return this.$message.error({ message: res.meta.message })
          } else {
            this.$message.success({ message: res.meta.message })
            this.$store.dispatch('getmenuList')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消菜单删除',
          })
        })
    },

    //获取子组件图标值
    getIconValue(value) {
      this.setMenuform.menu_icon = value
    },

    //抽屉功能
    handleClose(done) {
      this.loading = false
      this.dialog = false
    },

    cancelForm() {
      this.loading = false
      this.dialog = false
    },
  },
}
</script>
<style lang="sass" scoped>
.drawer_content
  padding-left: 15px
  .el-form
    padding: 10px
    .el-input,.el-select
      width: 150px

.el-drawer
  outline: none
  height: 100%

.demo-drawer__footer
  margin-left: 20px
</style>